<template>
  <div class="drawer">
    <template v-if="!isTalk">
      <h4>消息</h4>
      <div class="news-tog">
        <div>
          <el-button
            :class="[isTog ? '' : 'active']"
            size="small"
            round
            @click="togList"
            >我的私信</el-button
          >
          <el-button
            :class="[isTog ? 'active' : '']"
            size="small"
            round
            @click="togAnchor"
            >我的评论</el-button
          >
        </div>
      </div>
      <my-letters :datas="datas" v-show="!isTog"></my-letters>
      <reply-cmt :comments="replyCmt" v-show="isTog"></reply-cmt>
    </template>
    <template v-else>
      <talk :uid="talkId" @handelTalk="handelTalk"></talk>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getLetters, getComment } from '@/service/letter'
import { getUserDetail } from '@/service/user'
import LocalCache from '@/utils/cache'
import emitter from '@/utils/events'
import MyLetters from './my-letters.vue'
import ReplyCmt from './reply-comment.vue'
import Talk from './talk.vue'
import store from '@/store'

const isTog = ref(false)
const isTalk = ref(false)
const uid = store.getters['login/getUserId']
const talkId = ref(0)
const togAnchor = () => {
  isTog.value = true
  getCment(uid)
}
const togList = () => {
  isTog.value = false
  juderData()
}
const datas: any = ref([])
const getLetter = () => {
  getLetters().then((res: any) => {
    datas.value = [...res.msgs]
    let index = 0
    datas.value.map((item: any) => {
      getUserDetail(item.user.fromUserId).then((rey: any) => {
        item.userDeatil = rey.profile
        ++index
        if (index >= datas.value.length - 1) {
          LocalCache.setCache('letters', datas.value)
        }
      })
    })
  })
}
const letters = LocalCache.getCache('letters')
function juderData() {
  if (!letters) {
    getLetter()
  } else {
    datas.value = letters
  }
}
juderData()
const replyCmt = ref([])
const getCment = (id: number) => {
  getComment(id).then((res: any) => {
    replyCmt.value = res.comments
  })
}
onMounted(() => {
  emitter.on('switchCpn', switchCpn)
})
onBeforeUnmount(() => {
  emitter.off('switchCpn', switchCpn)
})
function switchCpn(params: any) {
  isTalk.value = params.flag
  talkId.value = params.id
}
// 接受到聊天框的返回点击
const handelTalk = () => {
  isTalk.value = false
}
</script>

<style scoped lang="less">
.drawer {
  width: 314px;
  height: 713px;
  border: 1px solid #eee;
  position: absolute;
  right: 21px;
  top: 80px;
  z-index: 99;
  background: #ffffff;
  color: #333;
  padding: 5px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  h4 {
    text-align: center;
  }
  .news-tog {
    width: 100%;
    display: flex;
    justify-content: center;

    > div {
      border: 1px solid skyblue;
      border-radius: 26px;
    }
    .active {
      background: skyblue;
      color: #f5f5f7;
    }
    .el-button {
      border: none;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
  }
}
</style>
